<template>
    <div class="payment_wrap">
        <div class="payment_contain">
            <div class="payment_contain_header">
                请选择支付方式
            </div>
            <div class="payment_contain_nav">
                客官下单金额如超过3000请使用支付宝支付
            </div>
            <div class="payment_method">
                <div class="payment_wx" @click="handleWxPay">
                    <div>
                        <img src="../assets/img/wxpay.png" alt="">
                    </div>
                    <p>微信支付</p>
                </div>
                <div class="payment_alipy" @click="handleAlipyPay">
                    <div>
                        <img src="../assets/img/alipypay.png" alt="">
                    </div>
                    <p>支付宝支付</p>
                </div>
            </div>
            <div class="payment_cancel" @click="$emit('on-handle-cancel',false)">
                取消
            </div>
        </div>
        <div id="download" v-if="zfb"
             style="position:fixed;top:0;left:0;background:rgba(0,0,0,.5);z-index:99999999;width:100%;height:100%" @click="zfb = false">
            <div style="position:fixed;top:0;right:0;width:40%">
                <img src="../assets/img/zfu.png" style="width:100%">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'payment',
        props:['goodId','sum','price','sku_mark','select_num'],
        data(){
            return{
                zfb:false
            }
        },
        methods:{
            isWeiXin() {
                let ua = window.navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                }
                else {
                    return false;
                }
            },
            handleWxPay(){
                if(this.goodId){
                    this.$router.push({
                        name:'select_area',
                        query:{name:'shop_info',id:this.goodId,sum:this.sum,price:this.price,sku_mark:this.sku_mark,coc:'wxpay'}
                    })
                }else{
                    this.$router.push({
                        name:'select_area',
                        query:{name:'shop_car',select_num:this.select_num,coc:'wxpay'}
                    })
                }

            },
            handleAlipyPay(){
                if(this.isWeiXin()){
                    this.zfb = true
                }else{
                    if(this.goodId){
                        this.$router.push({
                            name:'select_area',
                            query:{name:'shop_info',id:this.goodId,sum:this.sum,price:this.price,sku_mark:this.sku_mark,coc:"alipypay"}
                        })
                    }else{
                        this.$router.push({
                            name:'select_area',
                            query:{name:'shop_car',select_num:this.select_num,coc:"alipypay"}
                        })
                    }
                }
            }
        }
    }
</script>

<style lang="stylus">
    .payment_wrap
        position fixed
        left 0
        bottom 0;
        width 100%
        height 270px
        text-align left
        background:rgba(255,255,255,1);
        border-radius:10px 10px 0 0;
        .payment_contain
            height 197px
            .payment_contain_header
                text-align center
                font-size:20px;
                color:rgba(0,0,0,1);
                padding 20px 0
            .payment_contain_nav
                height:20px;
                padding 0 20px
                font-size:12px;
                line-height 20px
                color:rgba(102,102,102,1);
                background:rgba(228,228,228,1);
            .payment_method
                padding 0 20px
                .payment_wx,.payment_alipy
                    display flex
                    padding 20px 0
                    border-bottom 1px solid #CCCCCC
                    img
                        width 27px
                        height 27px
                        margin-right 18px
                        align-self center
                    p
                        font-size:13px;
                        align-self center
                        color:rgba(51,51,51,1);
            .payment_cancel
                height 50px
                line-height 50px
                text-align center
                font-size:17px;
                color:rgba(204,204,204,1);
</style>